<template>
  <div class="children_warpper">
    <div>
      {{ name }}
    </div>
    <div>
      <h2>父组件传递的信息</h2>
      <button @click="printInfo">打印父组件信息</button>
      <div>{{ propsInfo.info }}-{{ info }}</div>
      <div>{{ propsInfo.parentInfo }}-{{ parentInfo }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup name="ComponentName">
import { ref } from "vue";
const name = ref("我是子组件");
//子组件接收父组件传递的信息  //可以书数组 也可以是对象
let propsInfo = defineProps(["info", "parentInfo", "parentCard"]);
// let propsInfos = defineProps({
//   info:{
//     type: String,
//     required: true
//   },
//   parentInfo: {
//     type: String,
//     required: true
//   },
//   parentCard: {
//     type: Object,
//     required: true
//   },
//   info2: {
//     type: String,
//     default: '我是默认值'
//   },
// })
function printInfo() {
  // 确保 propsInfo 已定义
  if (!propsInfo) {
    console.error("propsInfo is not defined.");
    return;
  }
}
</script>

<style scoped>
.children_warpper {
  height: 300px;
  padding: 20px;
  background-color: gold;
  color: #000;
}
</style>
